<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/index.css"/>
</head>
<body>
<h1>method</h1>
<hr>
<div id="app">
    {{a}}
    <p>
        <!--<button @click="a++">+</button>-->
        <button @click="jia(2,$event)">+</button>
    </p>
    <p>
        <!--native是外部组件访问构造器本地方法-->
        <btn @click.native="jia"></btn>
    </p>

    <p>
        <!--通过原生事件调用-->
        <button onclick="jiajia()">+</button>
    </p>
</div>

<button onclick="vm.jia()">外部访问构造器里的事件</button>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 添加事件监听器时使用时间捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)出发时触发回调 -->
<div v-on:click.self="doThat">..</div>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<script>
    function jiajia() {
        vm.a++
    }

    var btn = {
        template: `<button>外部组件</button>`
    }

    var vm = new Vue({
        el: '#app',
        data: {
            a: 1
        },
        methods: {
//            jia: function (num,event) {
//                console.log(event);
//                if (num != '') {
//                    this.a += num
//                } else {
//                    this.a++
//                }
//
//            }
            jia: function (num, event) {
                this.a++
            }
        },
        components: {
            'btn': btn
        }
    })
</script>
</body>
</html>